@charset 'utf-8';
// 常用颜色
@primary:#ff3030;
@background:#ff3030;
@font-yellow:#F2AD31;
@font-gray:#7994B9;
@font-light-gray:#999;
@font-white:#fff;
@font-black:#333;
@font-red:#FF3030;
// 按钮背景色


// 常用背景色
@background-white:#fff;


//常用字体大小
.f24{font-size: 24px;}
.f28{font-size: 28px;}
.f32{font-size: 32px;}
.f34{font-size: 34px;}
.f36{font-size: 36px;}

// 常用动画
// 从右向左过渡
.slideright-enter{
  transform: translateX(-100vw);
}
.slideright-leave-to{
  transform: translateX(100vw);
}
// 从左向右过度
.slideleft-enter{
  transform: translateX(100vw);
}
.slideleft-leave-to{
  transform: translateX(-100vw);
}

// 上下过渡
.slideup-enter,
.slideup-leave-to{
  transform: translateY(100vh);
}
.slideup-enter-active,
.slideup-leave-active{
  transition: all .5s;
}

.slideleft-enter-active,
.slideleft-leave-active,
.slideright-enter-active,
.slideright-leave-active
{
  position:fixed;
  top:0;
  width:100vw;
  height:100vh;
  transition: all .3s;
}   
.fade-enter-active,
.fade-leave-active{
  position:fixed;
  top:0;
  width:100vw;
  height:100vh;
  transition: all .5s;
}
// 透明度变化
.fade-enter,.fade-leave-to{
  opacity: 0;
}